<template>
    <div class="flex h-screen">
        <div class="w-1/2 bg-cover flex justify-center items-center"
            style="background-size: cover; background-position: center;background-image:url('http://localhost:3000/_nuxt/assets/img/login-bg.png') ;">

            <div class="owl-carousel  w-3/5">
                <div class="welcome-login">
                    <div class="login-banner">
                        <img src="../assets/img/login-img.png" class="img-fluid" alt="Logo">
                    </div>
                    <div class="mentor-course text-center">
                        <h2>Welcome to <br>DreamsLMS Courses.</h2>
                        <p class="p-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt
                            ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="w-1/2 p-24">
            <div class="loginbox">
                <div class="w-100">
                    <div class="flex justify-between items-center py-4">
                        <img src="../assets/img/logo.svg" class="w" style="width:150px;height: auto;" alt="Logo">
                        <div class="back-home">
                            <router-link to="/">回到主页</router-link>
                        </div>
                    </div>
                    <h3 class="py-4">登录您的账户-13412365478-17346566471</h3>
                    <form @submit.prevent="hLogin">
                        <div class="form-group">
                            <label class="form-control-label">用户名</label>
                            <input type="phone" v-model="formData.telephone" class="form-control"
                                placeholder="请输入有效手机号">
                        </div>

                        <div class="form-group">
                            <label class="form-control-label">账户类型</label>
                            <div class="wallet-method wallet-radio-blk d-flex align-items-center">
                                <label class="radio-inline custom_radio me-4">
                                    <input type="radio" v-model="formData.roleKey" value="admin" name="optradio">
                                    <span class="checkmark"></span> 管理员
                                </label>
                                <label class="radio-inline custom_radio me-4">
                                    <input type="radio" v-model="formData.roleKey" value="principal" name="optradio">
                                    <span class="checkmark"></span> 校长
                                </label>

                                <label class="radio-inline custom_radio me-4">
                                    <input type="radio" v-model="formData.roleKey" value="teacher" name="optradio">
                                    <span class="checkmark"></span> 老师
                                </label>
                                <label class="radio-inline custom_radio me-4">
                                    <input type="radio" v-model="formData.roleKey" value="student" name="optradio">
                                    <span class="checkmark"></span> 学生
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-control-label">密码</label>
                            <div class="pass-group relative">
                                <input :type="showPass ? 'text' : 'password'" v-model="formData.password"
                                    class="form-control pass-input" placeholder="请输入密码">
                                <span @click="showPass = !showPass"
                                    class="toggle-password absolute top-4 right-4 cursor-pointer"
                                    :class="showPass ? 'feather-eye-off' : 'feather-eye'"></span>
                            </div>
                        </div>
                        <p class="py-2"><a class="forgot-link" href="#">忘记密码?</a></p>

                        <p class="remember-me py-2">
                            <label class="custom_check mr-2 mb-0 d-inline-flex remember-me"> 记住我
                                <input type="checkbox" name="radio">
                                <span class="checkmark"></span>
                            </label>
                        </p>
                        <div class="grid py-4">
                            <button class="btn btn-primary btn-start" type="submit">登录</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="google-bg text-center p-12">
                <p class="mb-0">@copyright 2024 10code</p>
            </div>
        </div>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import userApi from '@/api/userApi'
import useUserInfo from '@/store/user'

const userInfo = useUserInfo()

// 是否显示密码
const showPass = ref(false)
// 
const formData = reactive({
    telephone: '15100000000',
    // name: 'admin',
    password: 'abcd1234',
    roleKey: 'admin',
    remember: false
})

const hLogin = async () => {
    try {
        if (formData.roleKey === 'admin') {
            formData.telephone = '15100000000'
        } else if (formData.roleKey === 'principal') {
            formData.telephone = '13412365478'
        } else if (formData.roleKey === 'teacher') {
            formData.telephone = '17346566471'
        } else if (formData.roleKey === 'student') {
            formData.telephone = '13617285946'
        }
        const res = await userApi.login(formData)
        console.log('login.vue', res)
        console.log(userInfo)
        const { tokenString } = res
        userInfo.data.token = tokenString
        if (formData.roleKey === 'admin') {
            userInfo.data.user = { type: 'admin', ...res.admin }
        } else if (formData.roleKey === 'principal') {
            userInfo.data.user = { type: 'master', ...res.principal }
        } else if (formData.roleKey === 'teacher') {
            userInfo.data.user = { type: 'teacher', ...res.teacher }
        } else if (formData.roleKey === 'student') {
            userInfo.data.user = { type: 'student', ...res.student }
        }
        router.push('/my')
    } catch (error) {
        // alert(error)
        // console.info(error)
        // alert(error.message)
    }
}
</script>
